<template>
	<view class="page">
		<!-- 返回样式 -->
		<view class="returnbox" @click="fanhuidata">
			<image src="../../static/fanhui.png"></image>
		</view>
		<!-- 视频区域 -->
		<view class="videoarea">
			<view class="operation">
				<view v-if="operationvalue" class="operationlist">
					<image src="../../static/icon/aa/playingmethod.png"></image>
					<view style="font-size: 25rpx;">规则</view>
				</view>
				<view v-if="operationvalue" class="operationlist">
					<image src="../../static/icon/aa/appeal.png"></image>
					<view style="font-size: 25rpx;">申诉</view>
				</view>
				<view v-if="operationvalue" @click="voiceat" class="operationlist">
					<image v-if="voiceavalue" src="../../static/icon/aa/openmusic.png"></image>
					<image v-else src="../../static/icon/aa/closemusic.png"></image>
					<view style="font-size: 25rpx;">静音</view>
				</view>
				<view @click="operat" class="openmethod">
					<image
						:src="operationvalue==false?'../../static/icon/aa/openoperation.png':'../../static/icon/aa/closeoperation.png'">
					</image>
				</view>
			</view>
		</view>


		<!-- 商品操作区域 -->
		<view class="grabbox">

			<!-- 开始游戏区域 -->
			<view v-if="startth==false">
				<view class="grablist">
					<view class="grab_commodity">
						<image class="grab_commodity_image"
							src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/63313ec0f0607e1ca0e46f595593f455.jpg?w=800&h=800">
						</image>
						<view class="grab_commodity_text">订单详情</view>
					</view>
					<view  @click="startthegame" class="startbox">
						<view class="startext">20金币/次</view>
					</view>
					<view class="currency">
						<image class="currency_image" src="../../static/icon/aa/coins.png"></image>
						<view class="currency_num">23</view>
					</view>
				</view>
				<view class="grabtextlist flex ac">
					<view style="font-size: 27rpx;">可兑 0 积分</view>
					<view style="font-size: 27rpx;">畅玩卡: 1张</view>
					<view class="flex ac">
						<view class="zhao">甩爪</view>
						<view style="font-size: 27rpx;">NO:P1036</view>
					</view>
				</view>
			</view>
			<!-- 遥控游戏区域 -->
			<view v-if="startth==true">
				<view class="controlbox">
					<view class="controw">
						<image src="../../static/icon/aa/left.png"></image>
						<view style="width: 110rpx;height:100rpx;"></view>
						<image src="../../static/icon/aa/right.png"></image>
					</view>
					<view class="contcolumn">
						<image src="../../static/icon/aa/top.png"></image>
						<view style="width: 100rpx;height:80rpx;"></view>
						<image src="../../static/icon/aa/bottom.png"></image>
					</view>
					<view class="controgo">
						<image src="../../static/icon/aa/go.png"></image>
					</view>
				</view>
				<view class="controllist flex ac">
					<view class="flex ac">
						<view class="zhao">甩爪</view>
						<view style="font-size: 27rpx;color: #86878D;">NO:P1036</view>
					</view>
					<view class="contronum">
						<image class="contronumleft" src="../../static/icon/aa/jingbi.png"></image>
						<view style="font-size: 27rpx;">10币</view>
						<image class="contronumright" src="../../static/icon/aa/jia.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				startth: false,
				voiceavalue: true,
				operationvalue: false
			}
		},
		methods: {
			//打开或者关闭操作
			operat(e) {
				this.operationvalue = !this.operationvalue
			},

			//打开或者关闭声音
			voiceat(e) {
				this.voiceavalue = !this.voiceavalue
			},

			//开始游戏
			startthegame(e) {
				this.startth = true
			},

			//返回
			fanhuidata(e) {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #f7f8fa;
		display: flex;
		flex-flow: column;
		overflow: hidden;
	}

	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: column;
		overflow: hidden;
	}

	//返回样式
	.returnbox {
		width: 88rpx;
		height: 88rpx;
		position: fixed;
		top: 25rpx;
		left: 20rpx;
		z-index: 999;
	}

	.returnbox image {
		width: 100%;
		height: 100%;
	}

	// 视频区域
	.videoarea {
		// width: 100%;
		// height: 83vh;
		flex: 1;
		overflow: scroll;
		width: 100%;
		background-color: red;
		position: relative;
	}

	.operation {
		width: 85rpx;
		background: rgba(0, 0, 0, 0.45);
		position: absolute;
		bottom: 100rpx;
		right: 20rpx;
		border-radius: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 18rpx 0;

	}

	.openmethod {
		width: 85rpx;
		display: flex;
		justify-content: center;
	}

	.openmethod image {
		width: 56rpx;
		height: 56rpx;
	}

	.operationlist {
		width: 85rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #ffffff;
		margin-bottom: 15rpx;
	}

	.operationlist image {
		width: 67rpx;
		height: 67rpx;
	}

	//商品操作区域
	.grabbox {
		width: 100%;
		height: 230rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #ffffff;
	}

	//开始游戏区域
	.grablist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 35rpx;
	}

	.grab_commodity {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		position: relative;
	}

	.grab_commodity_image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.grab_commodity_text {
		width: 100%;
		height: 39rpx;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		left: 0;
		bottom: 0;
		font-size: 23rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0 0 20rpx 20rpx;
	}

	.startbox {
		width: 350rpx;
		height: 120rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url('../../static/icon/aa/startthegame.png');
	}

	.startext {
		font-size: 27rpx;
		color: #ffffff;
		text-align: center;
		margin-top: 70rpx;
	}

	.currency {
		width: 120rpx;
		height: 120rpx;
		background-color: rgba(1, 1, 1, 0.3);
		// background-color: #4CE52E;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
	}

	.currency_image {
		width: 80rpx;
		height: 80rpx;
	}

	.currency_num {
		font-size: 26rpx;
		color: #ffffff;
		margin-top: -9rpx;
	}

	.grabtextlist {
		padding: 20rpx 20rpx 0 20rpx;
		justify-content: space-between;
		color: #86878D;
	}

	.zhao {
		background-image: linear-gradient(270deg, #FF6144 0%, #FF99C9 100%);
		color: #ffffff;
		font-size: 23rpx;
		padding: 2rpx 5rpx;
		border-radius: 5rpx;
		margin-right: 5rpx;
	}


	// 遥控游戏区域
	.controlbox {
		width: 100%;
		height: 200rpx;
		position: relative;
		margin-top: -170rpx;
	}

	.controw {
		position: absolute;
		left: 50rpx;
		top: 50rpx;
		display: flex;
		align-items: center;
	}

	.controw image {
		width: 100rpx;
		height: 100rpx;
	}

	.contcolumn {
		position: absolute;
		left: 150rpx;
		top: -40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.contcolumn image {
		width: 100rpx;
		height: 100rpx;
	}

	.controgo {
		position: absolute;
		right: 50rpx;
		top: 35rpx;
		width: 130rpx;
		height: 130rpx;
	}

	.controgo image {
		width: 100%;
		height: 100%;
	}

	.controllist {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 0;
		bottom: 20rpx;
		padding: 0 20rpx;
	}

	.contronum {
		height: 50rpx;
		background-color: red;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// position: absolute;
	}

	.contronumleft {
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
	}

	.contronumright {
		width: 35rpx;
		height: 35rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
</style>